<template>
    <el-dialog class="detailDialog" v-model="props.planDetailDialog" :title="props.dialogForm?.title" width="45%"
        :close-on-click-modal="false" @close="close">
        <div class="title">基本信息</div>
        <el-row class="row">
            <el-col :span="8">
                <div>计划类型：{{ props.dialogForm?.form.planType == 1 ? '单次维护' : '周期维护' }}</div>
            </el-col>
            <el-col :span="8">
                <div>计划开始时间：{{ props.dialogForm?.form.planBeginDate }}</div>
            </el-col>
            <el-col :span="8">
                <div v-if="props.dialogForm?.form.planType == 2">维保周期：{{ props.dialogForm?.form.period +
                    props.dialogForm?.form.periodUnit }}</div>
            </el-col>
        </el-row>
        <el-row class="row">
            <el-col :span="8">
                <div>维保类型：{{ props.dialogForm?.form.maintainTypeName }}</div>
            </el-col>
            <el-col :span="8" v-if="props.dialogForm?.form.planType == 2">
                <div>计划结束时间：{{ props.dialogForm?.form.planEndDate }}</div>
            </el-col>
            <el-col :span="8">
                <div>维保人：{{ props.dialogForm?.form.maintainUserName }}</div>
            </el-col>
        </el-row>
        <div class="title">维保项目</div>
        <el-row class="row" v-for="item, index in props.dialogForm?.form.deviceItemList">
            <el-col :span="24">
                <div>{{ index + 1 + "、" + item.itemName + "：" + item.content }}</div>
            </el-col>
        </el-row>
        <div class="title">维保设备<span>（{{props.dialogForm?.form.deviceInfoList.length}}）</span></div>
        <el-row class="row">
            <el-col :span="24">
                <el-table :data="props.dialogForm?.form.deviceInfoList" border style="width: 100%">
                    <el-table-column type="index" label="序号" width="80" />
                    <el-table-column prop="deviceNum" label="设备编号" />
                    <el-table-column prop="deviceName" label="设备名称" />
                    <el-table-column prop="seatNum" label="位置号">
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
    </el-dialog>
</template>
<script setup lang='ts'>
import { ref, reactive } from 'vue'
const props = defineProps({
    planDetailDialog: Boolean,
    dialogForm: Object,
})

const emit = defineEmits(['closeDetail'])
const close = () => {
    emit('closeDetail')
}
</script>
<style scoped lang='scss'>
.detailDialog {
    .topBox {
        font-size: var(--el-font-size-base);
        border: 1px solid gray;
        padding: 20px 100px;
        margin-bottom: 15px;

        .item {
            display: flex;
            justify-content: space-between;
        }
    }

    .row {
        font-size: var(--el-font-size-base);
        margin-bottom: 8px;

    }

    .title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 10px;
    }
}
</style>